<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.thymeleaf.org/extras/dialect"
	  layout:decorate="admin/layout/layout"
>

<head>
	<title>实名认证资料列表</title>
</head>

<body class="scroll-container">
<div layout:fragment="content">
	<div class="wrapper page-wrapper scrollable">
		<div class="page-content">
			<div class="row">
				<div class="col-lg-12">
					<div class="plate">

						<div class="plate-head  d-flex justify-content-between">
							<div class="plate-title">实名认证资料列表</div>
							<div class="plate-tools">
								<a data-toggle="collapse" href="#advanced-filter" aria-expanded="false" aria-controls="advanced-filter">高级搜索</a>
							</div>
						</div>

						<div class="plate-body clearfix">
							<form class="form-inline form-filter">
								<div class="row m-0">
									<div class="input-group mb-2 mr-sm-2 mb-sm-0">

										<div class="input-group mb-2 mr-sm-2 mb-sm-0">
											<select name="cardType" class="form-control">
												<option value="" selected>请选择审核状态</option>
												<option value="NOT_APPLY">未申请审核</option>
												<option value="AUDITING">申请审核中</option>
												<option value="AUDIT_SUCCESS">审核成功</option>
												<option value="AUDIT_FAIL">审核失败</option>
											</select>
											<select name="cardType" class="form-control">
												<option value="" selected>请选择证件类型</option>
												<option value="ID_CARD_2">第二代身份证</option>
												<option value="ID_CARD_HK">香港身份证</option>
												<option value="ID_CARD_AM">澳门身份证</option>
												<option value="ID_CARD_TW">台湾身份证</option>
											</select>
										</div>
										<input type="text" name="idCardNo" class="form-control" placeholder="证件号码">
										<input type="text" name="name" class="form-control" placeholder="用户实名">
									</div>
									<div class="row m-0">
										<div data-type="datetime-picker" class="input-group mb-2 mr-sm-2 mb-sm-0">
											<input name="createTime_start" type="text" class="form-control" readonly="" data-pick-time="false" data-format="yyyy-MM-dd" placeholder="创建时间起始">
											<span class="input-group-addon"><i class="" data-time-icon="fa fa-clock-o" data-date-icon="fa fa-calendar"></i></span>
										</div>

										<div data-type="datetime-picker" class="input-group mb-2 mr-sm-2 mb-sm-0">
											<input name="createTime_endDate" type="text" class="form-control" readonly="" data-pick-time="false" data-format="yyyy-MM-dd" placeholder="创建时间截止">
											<span class="input-group-addon"><i class="" data-time-icon="fa fa-clock-o" data-date-icon="fa fa-calendar"></i></span>
										</div>

									</div>
								</div>

								<div id="advanced-filter" class="collapse w-100">
								</div>

								<div class="row m-0 mt-2 w-100">
									<input id="test" class="btn btn-primary mr-2" type="button" value="过滤">
									<input class="btn btn-secondary mr-2" type="reset" value="重置">
									<a data-toggle="collapse" href="#advanced-filter" aria-expanded="false" aria-controls="advanced-filter"
									   style="padding-top: 12px; text-decoration: underline;">高级过滤</a>
								</div>
							</form>

							<div id="customEditorForm">
								<ul class="nav nav-tabs" id="customEditorForm_Tabs">
									<li class="nav-item">
										<a class="nav-link active" href="#baseInfo" data-toggle="tab" role="tab" aria-selected="true">基本信息</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#auditStatusInfo" data-toggle="tab" role="tab" aria-selected="true">审核状态</a>
									</li>
								</ul>

								<div id="myTabContent1" class="tab-content">
									<div class="tab-pane in active" id="baseInfo">
										<div data-editor-template="front"></div>
										<div data-editor-template="back"></div>
										<div data-editor-template="cardType"></div>
										<div data-editor-template="cardNo"></div>
										<div data-editor-template="name"></div>
										<div data-editor-template="user.id"></div>
									</div>
									<div class="tab-pane fade" id="auditStatusInfo">
										<div data-editor-template="auditStatus"></div>
										<div data-editor-template="auditNote"></div>
									</div>
								</div>
							</div>

							<table id="dataTable" class="table responsive table-bordered table-hover" cellspacing="0" width="100%">
								<thead>
								<tr>
									<th class="all">
										<label class="custom-control custom-checkbox">
											<input id="check-all" type="checkbox" class="custom-control-input">
											<span class="custom-control-indicator"></span>
										</label>
									</th>
									<th>证件正面</th>
									<th>证件背面</th>
									<th>证件类型</th>
									<th class="all" data-priority="1">证件号码</th>
									<th>真实姓名</th>
									<th>用户帐号</th>
									<th>所属系统</th>
									<th>审核状态</th>
									<th>审核结果</th>
									<th class="min-tablet-l">创建时间</th>
									<th data-priority="1">操作</th>
								</tr>
								</thead>
								<tbody></tbody>
								<tfoot></tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="../../../static/asset/js/base.min.js" th:src="@{/asset/js/base.min.js}"></script>
	<script type="text/javascript" src="../../../static/asset/js/form.min.js" th:src="@{/asset/js/form.min.js}"></script>
	<script type="text/javascript" src="../../../static/asset/js/datatables.min.js" th:src="@{/asset/js/datatables.min.js}"></script>
	<script type="text/javascript" src="../../../static/asset/js/common/dataTables.ext.js" th:src="@{/asset/js/common/dataTables.ext.js}"></script>
	<script type="text/javascript" src="../../../static/asset/js/app.js" th:src="@{/asset/js/app.js}"></script>

	<script>
		$(function () {
			var editor = new $.fn.dataTable.Editor({
				ajax: './list/action',
				table: "#dataTable",
				template: '#customEditorForm',
				idSrc: 'id',
				fields: [
					{name: 'id', type: 'hidden'},
					{name: 'creator.id', type: 'hidden'},
					{
						label: '证件正面:',
						name: 'front',
						type: 'upload',
						display: function (fileId) {
							var result = '';
							try {
								var fileUrl = editor.file('files', fileId);
								result = '<img src="' + fileUrl.webPath + '"/>';
							} catch (e) {
							}
							return result;
						},
						fieldInfo: '<div style="color:red">注意：图片成功上传后300秒内有效!</div>'
					},
					{
						label: '证件背面:',
						name: 'back',
						type: 'upload',
						display: function (fileId) {
							var result = '';
							try {
								var fileUrl = editor.file('files', fileId);
								result = '<img src="' + fileUrl.webPath + '"/>';
							} catch (e) {
							}
							return result;
						},
						fieldInfo: '<div style="color:red">注意：图片成功上传后300秒内有效!</div>'
					},
					{
						label: '证件类型:',
						name: 'cardType',
						type: 'select2',
						select2Opt: {
							placeholder: '请选择',
							allowClear: true,
							multiple: false,
							ajax: {
								url: '../realname/select2?prop=cardType'
							},
							templateSelection: function (data, container) {
								return data ? data.text : "";
							}
						}
					},
					{label: '证件号码:', name: 'cardNo'},
					{label: '真实姓名:', name: 'name'},
					{
						label: '用户帐号:',
						name: 'user.id',
						type: 'select2',
						select2Opt: {
							placeholder: '请选择',
							allowClear: true,
							multiple: false,
							ajax: {
								url: '../user/select2'
							},
							templateSelection: function (data, container) {
								return data ? data.text : "";
							}
						}
					},
					{
						label: '审核状态:',
						name: 'auditStatus',
						type: 'select2',
						select2Opt: {
							placeholder: '-',
							allowClear: true,
							multiple: false,
							ajax: {
								url: function () {
									return '../realname/select2?prop=auditStatus&groupId=auditor';
								}
							}
						}
					},
					{
						label: '审核结果:',
						name: 'auditNote',
						type: 'textarea'
					}
				]
			}).on('initCreate', function (e, o, action) {
				//创建时隐藏字段。
			}).on('initEdit', function (e, o, action) {
				//编辑时隐藏字段。
			});

			// Edit record
			$('#dataTable').on('click', 'a.editor_edit', function (e) {
				e.preventDefault();

				editor.edit($(this).closest('tr'), {
					title: '编辑记录',
					buttons: {
						label: '提交',
						className: 'btn-primary',
						fn: function () {
							editor.submit();
						}
					}
				});
			});

			// Delete a record
			$('#dataTable').on('click', 'a.editor_remove', function (e) {
				e.preventDefault();

				var row = $(this).closest('tr');
				editor.remove(row, {
					title: '删除记录',
					message: '确定删除该记录?',
					buttons: {
						label: '提交',
						className: 'btn-danger',
						fn: function () {
							editor.submit();
						}
					}
				});
			});

			var table = $('#dataTable').DataTable({
				//select: true,
				autoWidth: false,
				ajax: {
					"url": './list/data', // ajax source
					"type": 'post'
				},
				"buttons": [
					{text: '新增', className: 'btn btn-primary', extend: "create", editor: editor},
					{
						text: '刷新',
						className: 'btn btn-secondary btn-outline',
						action: function (e, dt, node, config) {
							dt.ajax.reload();
						}
					},
					{text: '列显控制', className: 'btn btn-secondary', extend: "colvis", editor: editor}
				],
				columns: [
					{
						data: "id",
						orderable: true,
						visible: true
					},
					{
						data: "front",
						searchable: false,
						orderable: false,
						render: function (data, type, row, meta) {
							return '<a target="_blank" href="' + data + '"><img style="width:50px; height:50px;" src="' + data + '"/></a>';
						}
					},
					{
						data: "back",
						searchable: false,
						orderable: false,
						render: function (data, type, row, meta) {
							return '<a target="_blank" href="' + data + '"><img style="width:50px; height:50px;" src="' + data + '"/></a>';
						}
					},
					{
						data: "cardType",
						searchable: true,
						visible: true,
						render: function (data, type, row, meta) {
							var result = '';
							switch (data) {
								case 'ID_CARD_2':
									result = '第二代身份证';
									break;
								case 'ID_CARD_HK':
									result = '香港身份证';
									break;
								case 'ID_CARD_AM':
									result = '澳门身份证';
									break;
								case 'ID_CARD_TW' :
									result = '台湾身份证';
									break;
							}
							return result;
						}
					},
					{
						data: "cardNo",
						searchable: true,
						visible: true
					},
					{
						data: "name",
						searchable: false,
						visible: true
					},
					{
						data: "user.username",
						searchable: true,
						visible: true
					},
					{
						data: "user.originSystem.name",
						searchable: false,
						visible: true
					},
					{
						data: "auditStatus",
						searchable: false,
						visible: true,
						render: function (data, type, row, meta) {
							return getAuditStatusText(data);
						}
					},
					{
						data: "auditNote",
						searchable: false,
						visible: false
					},
					{
						data: "createTime",
						searchable: false,
						visible: false
					},
					{
						data: "id",
						searchable: false,
						orderable: false,
						visible: true
					}
				],
				order: [0, "desc"],
				columnDefs: [
					{
						targets: [0],
						render: function (data, type, row, meta) {
							return '<label class="custom-control custom-checkbox">'
								+ '	<input type="checkbox" class="custom-control-input">'
								+ '	<span class="custom-control-indicator"></span>' + data
								+ '</label>'
						}
					},
					{
						targets: [-1],
						render: function (data, type, row, meta) {
							var result = '<a href="javascript:;" class="editor_edit">编辑</a>';
							result += '&nbsp;|&nbsp;<a href="javascript:;" class="editor_remove">删除</a>';

							return result;
						}
					}
				]
			});

			function getAuditStatusText(status) {
				var result = "未申请审核";
				switch (status) {
					case 'NOT_APPLY':
						result = '未申请审核';
						break;
					case 'AUDITING':
						result = '申请审核中';
						break;
					case 'AUDIT_SUCCESS':
						result = '审核成功';
						break;
					case 'AUDIT_FAIL':
						result = '<span style="color:red">审核失败</span>';
						break;
				}
				return result;
			}

			table.ext.filter.form('.form-filter');
			table.ext.filter.submit('#test');
			table.ext.batchCheck('#check-all');

			/* $('#example').dataTable({
			 "footerCallback": function( tfoot, data, start, end, display ) {
			 var api = this.api();
			 $( api.column(5).footer() ).html(
			 api.column(5).data().reduce(function ( a, b ) {
			 return App.floatVal(a) + App.floatVal(b);
			 }, 0)
			 );
			 }
			 });*/
		})
	</script>

	<!--{{> body-footer}}-->

</div>
</body>
</html>